<!DOCTYPE html>
<html>

    <head>
        <title>Angular colorpicker</title>
        <link rel="stylesheet" href="styles/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="styles/bootstrap-responsive.css" type="text/css">
        <!-- build:css styles/main.css -->
        <link rel="stylesheet" href="styles/main.css" type="text/css">
        <!-- endbuild -->
        <link href="components/jquery-ui/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css">
        <link href="components/jquery.colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css">
        <!-- build:js scripts/script.js -->
        <script src="components/jquery/jquery.js" type="text/javascript">
        </script>
        <script src="components/jquery-ui/ui/jquery-ui.js" type="text/javascript">
        </script>
        <script src="components/jquery.colorpicker/jquery.colorpicker.js" type="text/javascript">
        </script>
        <script src="components/angular/angular.js"></script>
        <script src="components/angular-resource/angular-resource.js"></script>
        <script src="components/angular-cookies/angular-cookies.js"></script>
        <script src="components/angular-sanitize/angular-sanitize.js"></script>
        <script src="components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript">
        </script>
        <script src="components/angular-ui-utils/modules/keypress/keypress.js" type="text/javascript">
        </script>
        <script src="scripts/app.js"></script>
        <script src="scripts/directives/ColorPicker.js"></script>
        <!-- endbuild -->
    </head>

    <body ng-app="iconApp">
      <div id="color">Color: {{mainColor}}</div>
      <input id="mainColor" ng-model="mainColor" colorpicker ></input>
    </body>

</html>
